<link rel="stylesheet" href="/static/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
<!-- lay ui --->
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/layui/extend/eleTree/eleTree.css">
<form role="form" class="" id="quickForm" method="post" action="">
    <div class="card-body">
        <input type="hidden" name="id" value="{{.model.Id}}">
        <div class="form-group">
            <label for="Role" class="">角色名</label>
            <input type="text" name="role_name" class="form-control" id="Role" placeholder=""
                   value="{{.model.RoleName}}">
        </div>
        <div class="form-group">
            <label for="menu_list">权限</label>
            <div id="menu_list"></div>
        </div>
    </div>
    <!-- /.card-body -->
    <div class="card-footer" style="text-align: center">
        <button type="submit" class="btn btn-primary">提交</button>
        <a href="/admin/role/index" class="btn btn-danger">返回</a>
    </div>
</form>
{{/*<script src="/static/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>*/}}
<script src="/static/layui/layui.js"></script>
<script src="/static/layui/lay-config.js"></script>
<script>
    $('.select2bs4').select2({
        theme: 'bootstrap4'
    })
</script>
<script>
    //menu tree
    let el;
    let roleId = {{.model.Id}};
    layui.use(['eleTree'], function () {
        let $ = layui.jquery;
        let eleTree = layui.eleTree;
        el = eleTree.render({
            elem: '#menu_list',
            // data: data,
            showCheckbox: true,
            defaultExpandAll: true,
            method: 'get',
            url: '/admin/api/menu/get-menu-list?role_id=' + roleId,
            response: {   // 对于后台数据重新定义名字
                statusName: "code",
                statusCode: 1,
                dataName: "data"
            },
            request: {     // 对后台返回的数据格式重新定义
                name: "Name",
                key: "Id",
                children: "Child",
                checked: "Checked",
                disabled: "disabled",
                isLeaf: "isLeaf",
                icon: "Icon"
            },
        });
    });

</script>
<script type="text/javascript">
    let url = "";
    let id = '{{.model.Id}}';
    if (id > 0) {
        url = "/admin/api/role/edit";
    } else {
        url = "/admin/api/role/create";
    }
    $(document).ready(function () {
        $.validator.setDefaults({
            submitHandler: function (form) {
                let data = $(form).serialize();
                el.getChecked(false).forEach(function (k) {
                    data += "&menu=" + k['Id'];
                });
                $.ajax({
                    url: url,
                    type: "post",
                    dataType: "json",
                    data: data,
                    beforeSend: function () {

                    },
                    success: function (res) {
                        if (res.code === 1) {
                            Swal.fire(
                                {
                                    icon: 'success',
                                    title: '提示！',
                                    text: '操作成功:)',
                                    showConfirmButton: false,
                                    timer: 1500,
                                    timerProgressBar: true,
                                }
                            ).then((r) => {
                                window.location.href = '/admin/role/index'
                            });
                        } else {
                            alert(res.message)
                        }
                    },
                    error: function () {

                    }
                })
            }
        });
        $('#quickForm').validate({
            rules: {
                role_name: {
                    required: true,
                },
                menu_id: {
                    required: true
                }
            },
            messages: {
                role_name: {
                    required: "请输入角色名称",
                },
                menu_id: {
                    required: "请选择菜单权限",
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
